<template>
  <el-dialog
    :append-to-body="true"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="600px" 
    center
    title="员工导入"
    :visible="showExcelDialog"
    @close="$emit('update:showExcelDialog', false)"
  >
    <el-row type="flex" justify="center">
      <div class="upload-excel">
        <input
          ref="excel-upload-input"
          class="excel-upload-input"
          type="file"
          accept=".xlsx, .xls"
          @change="uploadChange"
        >
        <div class="drop">
          <i class="el-icon-upload" />
          <el-button @click="getTemplate" type="text">下载导入模板</el-button>
          <span>将文件拖到此处或
            <el-button @click="handleUpload" type="text">点击上传</el-button>
          </span>
        </div>
      </div>
    </el-row>
    <el-row type="flex" justify="end">
      <!-- update:props属性名，值 直接修改 .sync修饰符的属性值 -->
      <el-button size="mini" type="primary" @click="$emit('update:showExcelDialog', false)">取消</el-button>
    </el-row>
  </el-dialog>
</template>
<script>
import FileSaver from 'file-saver'//引入文件下载到本地的包
import {getExportTemplate,uploadExcel} from '@/api/employee'
import {Message} from 'element-ui'
export default {
  props: {
    showExcelDialog: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    // 调用获取（下载）导入的模版接口数据
    async getTemplate(){
      const result=await getExportTemplate()
      // console.log(result);
      // 此时result是一个二进制流文件，我们需要使用一个npm包，导入并使用，直接将blob文件下载到本地
      // 命令： pnpm i file-saver
      // FileSaver.saveAs(blob对象，文件名称)
      FileSaver.saveAs(result,'员工信息表模版.xlsx')
    },
    // 点击按钮弹出文件选择器 通过input file（这里没有使用el组件哦）用的是原生dom
    handleUpload(){
      // 注意：由于input中的ref属性名是短横线格式，会有语法规范，所以不能用this.$refs.属性名(如果把属性名写成小驼峰形式就可以)
      // this.$refs.属性名<==>this.$ref["属性名"]
      this.$refs["excel-upload-input"].click()
    },
    async uploadChange(event){
      console.log(event);
      const files=event.target.files//input的文件列表
      if(files.length>0){
        // 注意：这里由于后端限制了上传的文件类型必须为form-data，所以需要将获取到的文件数据通过new FormData()实例进行转化
        const data=new FormData()
        // 属性名：值===>file:files[0]   (属性名以接口文档为主)
        data.append('file',files[0])
        try {
          // 文件选择处理好后，调用上传文件(批量的员工excel数据)的接口
          await uploadExcel(data)

          /*上传成功后*/

          // 通知父组件-关闭弹层
          this.$emit  ('update:showExcelDialog', false)

          //清空文件选择器，避免再次上传时还是之前的文件
          // this.$refs["excel-upload-input"].value=''
          
          // 通知父组件-重新获取渲染最新的员工  列表数据
          this.$emit('updateSuccess')
          // 提示反馈
          Message.success('上传成功')
          
        } catch (error) {
          /*上传失败 */

          // //清空文件选择器，避免再次上传时还是之前的文件
          // this.$refs["excel-upload-input"].value=''
        } finally{
          //无论成功失败都会执行finally中的代码(避免重复代码)

          //清空文件选择器，避免再次上传时还是之前的文件
          this.$refs["excel-upload-input"].value=''
        }
        
      }
      
      
      
      
      
    }


  }
}
</script>

<style scoped lang="scss">
    .upload-excel {
      display: flex;
      justify-content: center;
      margin: 20px;
      width: 360px;
      height: 180px;
      align-items: center;
      color: #697086;
      .excel-upload-input {
        display: none;
        z-index: -9999;
      }
      .btn-upload,
      .drop {
        border: 1px dashed #dcdfe6;
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 160px;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .drop {
        line-height: 40px;
        color: #bbb;
        i {
          font-size: 60px;
          display: block;
          color: #c0c4cc;
        }
      }
    }
</style>